<template>
  <div class="expressInquiry">
    <header-item :activeIndex="activeIndex"></header-item>
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" class="el-table">
        <el-tab-pane label="待运输" name="first">
          <div class="search">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="按照时间">
                <el-select v-model="formInline.number">
                  <el-option label="一天内" value="1"></el-option>
                  <el-option label="一周内" value="7"></el-option>
                  <el-option label="两周内" value="14"></el-option>
                  <el-option label="一个月内" value="30"></el-option>
                  <el-option label="两个月内" value="60"></el-option>
                  <el-option label="一年内" value="365"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input v-model="formInline.nameLike" placeholder="模糊查询"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit('待运输')">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-card class="box-card">
            <el-table
                  :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                  style="width: 100%">
                  <el-table-column label="订单编号" prop="orderCode"></el-table-column>
                  <el-table-column label="寄件人姓名" prop="jname"></el-table-column>
                  <el-table-column label="寄件人手机" prop="jtelephone"></el-table-column>
                  <el-table-column label="寄件时间" prop="createDate"></el-table-column>
                  <el-table-column label="订单价格" prop="money"></el-table-column>
                  <el-table-column label="发货地址">
                    <template slot-scope="scope">
                      {{scope.row.jprovince+scope.row.jcity+scope.row.jarea+scope.row.jaddressDetail}}
                    </template>
                  </el-table-column>
                  <el-table-column label="收货人姓名" prop="sname"></el-table-column>
                  <el-table-column label="收货人手机" prop="stelephone"></el-table-column>
                  <el-table-column label="收货地址">
                    <template slot-scope="scope">
                      {{scope.row.sprovince+scope.row.scity+scope.row.sarea+scope.row.saddressDetail}}
                    </template>
                  </el-table-column>
                  <el-table-column label="快递员" prop="kname"></el-table-column>
                  <el-table-column label="快递员手机" prop="ktelephone"></el-table-column>
                  <el-table-column label="快递状态" prop="currentStatusText"></el-table-column>
                  <el-table-column align="right" label="操作">
                      <template slot-scope="scope">
                          <el-button
                          size="mini"
                          type="danger"
                          @click="handleTixing(scope.$index, scope.row)">提醒发货</el-button>
                      </template>
                  </el-table-column>
                  <el-table-column align="right" label="查看">
                      <template slot-scope="scope">
                          <el-popover
                              placement="left"
                              width="500">
                              <div class="express-track">
                                  <p class="title">订单详情</p>
                                  <ul class="detail"> 
                                      <li>
                                          <span>订单状态：</span>
                                          <span>{{details.consumerStatus}}</span>
                                      </li>
                                      <li>
                                          <span>快递状态：</span>
                                          <span>{{details.currentStatusText}}</span>
                                      </li>
                                      <li>
                                          <span>快递员：</span>
                                          <span>{{details.kname}}</span>
                                      </li>
                                      <li>
                                          <span>快递员电话：</span>
                                          <span>{{details.ktelephone}}</span>
                                      </li>
                                      <li>
                                          <span>寄件人姓名：</span>
                                          <span>{{details.jname}}</span>
                                      </li>
                                      <li>
                                          <span>寄件人电话：</span>
                                          <span>{{details.jtelephone}}</span>
                                      </li>
                                      <li>
                                          <span>寄件地址：</span>
                                          <span>{{details.jprovince+details.jcity+details.jarea+details.jaddressDetail}}</span>
                                      </li>
                                      <li>
                                          <span>收件人姓名：</span>
                                          <span>{{details.sname}}</span>
                                      </li>
                                      <li>
                                          <span>收件人电话：</span>
                                          <span>{{details.stelephone}}</span>
                                      </li>
                                      <li>
                                          <span>收件地址：</span>
                                          <span>{{details.sprovince+details.scity+details.sarea+details.saddressDetail}}</span>
                                      </li>
                                        <li>
                                            <span>期望取件时间：</span>
                                            <span>{{details.lookingTime}}</span>
                                        </li>
                                        
                                        <li>
                                            <span>寄件方式：</span>
                                            <span>{{details.type==1?'快递员上门':'网点自寄'}}</span>
                                        </li>
                                        <li>
                                            <span>快递公司：</span>
                                            <span>{{details.companyName}}</span>
                                        </li>
                                        <li>
                                            <span>付费方式：</span>
                                            <span>{{details.paymentMethod}}</span>
                                        </li>
                                        <li>
                                            <span>物品信息：</span>
                                            <span>{{details.goodsType==1?'书籍':details.goodsType==2?'衣物':details.goodsType==3?'电子产品':details.goodsType==4?'食品':'其他'}}</span>
                                        </li>
                                        <li>
                                            <span>保价费用：</span>
                                            <span>{{details.insuranceMoney?details.insuranceMoney:0}}</span>
                                        </li>
                                        <li>
                                            <span>备注：</span>
                                            <span>{{details.remarks}}</span>
                                        </li>
                                  </ul>
                              </div>
                              <el-button
                                  size="mini"
                                  type="danger" slot="reference" @click="handleXq(scope.$index, scope.row)">详情</el-button>
                          </el-popover>
                      </template>
                  </el-table-column>
              </el-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="运输中" name="second">
          <div class="search">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="按照时间">
                <el-select v-model="formInline.number">
                  <el-option label="一天内" value="1"></el-option>
                  <el-option label="一周内" value="7"></el-option>
                  <el-option label="两周内" value="14"></el-option>
                  <el-option label="一个月内" value="30"></el-option>
                  <el-option label="两个月内" value="60"></el-option>
                  <el-option label="一年内" value="365"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input v-model="formInline.nameLike" placeholder="模糊查询"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit('运输中')">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 订单编号、寄件人姓名、寄件人手机、寄件时间、订单价格、发货地址、收货人姓名、收货人手机、收货地址、当前快递员的姓名、快递员的手机号、快递所有更新的位置信息和当前所在的位置联系当前快递员功能运输中 -->
          <el-card class="box-card">
            <el-table
                  :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                  style="width: 100%">
              <el-table-column label="订单编号" prop="orderCode"></el-table-column>
              <el-table-column label="寄件人姓名" prop="jname"></el-table-column>
              <el-table-column label="寄件人手机" prop="jtelephone"></el-table-column>
              <el-table-column label="寄件时间" prop="createDate"></el-table-column>
              <el-table-column label="订单价格" prop="money"></el-table-column>
              <el-table-column label="发货地址">
                <template slot-scope="scope">
                  {{scope.row.jprovince+scope.row.jcity+scope.row.jarea+scope.row.jaddressDetail}}
                </template>
              </el-table-column>
              <el-table-column label="收货人姓名" prop="sname"></el-table-column>
              <el-table-column label="收货人手机" prop="stelephone"></el-table-column>
              <el-table-column label="收货地址">
                <template slot-scope="scope">
                  {{scope.row.sprovince+scope.row.scity+scope.row.sarea+scope.row.saddressDetail}}
                </template>
              </el-table-column>
              <el-table-column label="快递员" prop="kname"></el-table-column>
              <el-table-column label="快递员手机" prop="ktelephone"></el-table-column>
              <el-table-column label="快递状态" prop="currentStatusText"></el-table-column>
              <el-table-column align="right" label="操作">
                  <template slot-scope="scope">
                    <!-- <el-button
                    size="mini"
                    type="danger"
                    @click="handleSee(scope.$index, scope.row)">查看详情</el-button> -->
                    <el-popover
                      placement="left"
                      width="500">
                      <div class="express-track">
                        <p class="title">快件跟踪</p>
                        <p v-show="!activities.length">没有查到快递信息</p>
                        <el-timeline :reverse="reverse">
                            <el-timeline-item
                            class="timeLine-item"
                            v-for="(activity, index) in activities"
                            :key="index"
                            :timestamp="activity.location">
                            {{activity.publishTime}}
                            </el-timeline-item>
                        </el-timeline>
                      </div>
                      <el-button
                        size="mini"
                        type="danger" slot="reference" @click="handleSee(scope.$index, scope.row)">快递</el-button>
                    </el-popover>
                  </template>
              </el-table-column>
              <el-table-column align="right" label="查看">
                  <template slot-scope="scope">
                      <el-popover
                          placement="left"
                          width="500">
                          <div class="express-track">
                              <p class="title">订单详情</p>
                              <ul class="detail"> 
                                  <li>
                                          <span>订单状态：</span>
                                          <span>{{details.consumerStatus}}</span>
                                      </li>
                                      <li>
                                          <span>快递状态：</span>
                                          <span>{{details.currentStatusText}}</span>
                                      </li>
                                      <li>
                                          <span>快递员：</span>
                                          <span>{{details.kname}}</span>
                                      </li>
                                      <li>
                                          <span>快递员电话：</span>
                                          <span>{{details.ktelephone}}</span>
                                      </li>
                                      <li>
                                          <span>寄件人姓名：</span>
                                          <span>{{details.jname}}</span>
                                      </li>
                                      <li>
                                          <span>寄件人电话：</span>
                                          <span>{{details.jtelephone}}</span>
                                      </li>
                                      <li>
                                          <span>寄件地址：</span>
                                          <span>{{details.jprovince+details.jcity+details.jarea+details.jaddressDetail}}</span>
                                      </li>
                                      <li>
                                          <span>收件人姓名：</span>
                                          <span>{{details.sname}}</span>
                                      </li>
                                      <li>
                                          <span>收件人电话：</span>
                                          <span>{{details.stelephone}}</span>
                                      </li>
                                      <li>
                                          <span>收件地址：</span>
                                          <span>{{details.sprovince+details.scity+details.sarea+details.saddressDetail}}</span>
                                      </li>
                                        <li>
                                            <span>期望取件时间：</span>
                                            <span>{{details.lookingTime}}</span>
                                        </li>
                                        
                                        <li>
                                            <span>寄件方式：</span>
                                          <span>{{details.type==1?'快递员上门':'网点自寄'}}</span>
                                        </li>
                                        <li>
                                            <span>快递公司：</span>
                                            <span>{{details.companyName}}</span>
                                        </li>
                                        <li>
                                            <span>付费方式：</span>
                                            <span>{{details.paymentMethod}}</span>
                                        </li>
                                        <li>
                                            <span>物品信息：</span>
                                            <span>{{details.goodsType==1?'书籍':details.goodsType==2?'衣物':details.goodsType==3?'电子产品':details.goodsType==4?'食品':'其他'}}</span>
                                        </li>
                                        <li>
                                            <span>保价费用：</span>
                                            <span>{{details.insuranceMoney?details.insuranceMoney:0}}</span>
                                        </li>
                                        <li>
                                            <span>备注：</span>
                                            <span>{{details.remarks}}</span>
                                        </li>
                              </ul>
                          </div>
                          <el-button
                              size="mini"
                              type="danger" slot="reference" @click="handleXq(scope.$index, scope.row)">详情</el-button>
                      </el-popover>
                  </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="third">
          <div class="search">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="按照时间">
                <el-select v-model="formInline.number">
                  <el-option label="一天内" value="1"></el-option>
                  <el-option label="一周内" value="7"></el-option>
                  <el-option label="两周内" value="14"></el-option>
                  <el-option label="一个月内" value="30"></el-option>
                  <el-option label="两个月内" value="60"></el-option>
                  <el-option label="一年内" value="365"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input v-model="formInline.nameLike" placeholder="模糊查询"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit('已完成')">查询</el-button>
              </el-form-item>
            </el-form>
          </div>   
          <el-card class="box-card">
            <el-table
              :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
              style="width: 100%">
              <el-table-column label="订单编号" prop="orderCode"></el-table-column>
              <el-table-column label="寄件人姓名" prop="jname"></el-table-column>
              <el-table-column label="寄件人手机" prop="jtelephone"></el-table-column>
              <el-table-column label="寄件时间" prop="createDate"></el-table-column>
              <el-table-column label="订单价格" prop="money"></el-table-column>
              <el-table-column label="发货地址">
                <template slot-scope="scope">
                  {{scope.row.jprovince+scope.row.jcity+scope.row.jarea+scope.row.jaddressDetail}}
                </template>
              </el-table-column>
              <el-table-column label="收货人姓名" prop="sname"></el-table-column>
              <el-table-column label="收货人手机" prop="stelephone"></el-table-column>
              <el-table-column label="收货地址">
                <template slot-scope="scope">
                  {{scope.row.sprovince+scope.row.scity+scope.row.sarea+scope.row.saddressDetail}}
                </template>
              </el-table-column>
              <el-table-column label="收货时间" prop="getTime"></el-table-column>

              <el-table-column label="快递员" prop="kname"></el-table-column>
              <el-table-column label="快递员手机" prop="ktelephone"></el-table-column>
              <el-table-column label="快递状态" prop="currentStatusText"></el-table-column>
              <el-table-column align="right"  label="操作">
                  <template slot-scope="scope">
                    <el-popover
                      placement="left"
                      width="500"
                      v-show="!scope.row.nkEvaluation">
                      <div class="express-track">
                        <div class="ovfl pingjia">
                          <span class='fl'>快递员</span>
                          <el-rate class='fl'
                            v-model="kEvaluation"
                            show-text>
                          </el-rate>
                        </div>
                        <div class="ovfl pingjia">
                          <span class='fl'>网点</span>
                          <el-rate class="fl"
                            v-model="nkEvaluation"
                            show-text>
                          </el-rate>
                        </div>
                        <div class="ovfl pingjia">
                          <span>建议</span>
                          <el-input placeholder="请输入建议" v-model="consumerEvaluation" style="width: 80%"></el-input>
                        </div>
                      <el-button
                        type="primary" slot="reference" @click="handlePingjia(scope.$index, scope.row)" style="margin: 0 auto;display: block">提交</el-button>
                      </div>
                      <el-button
                        size="mini"
                        type="danger" slot="reference">评价</el-button>
                    </el-popover>
                    <p v-show="scope.row.nkEvaluation">已评价</p>
                    <el-popover
                      placement="left"
                      width="500">
                      <div class="express-track">
                        <p class="title">快件跟踪</p>
                        <p v-show="!activities.length">没有查到快递信息</p>
                        <el-timeline :reverse="reverse">
                            <el-timeline-item
                            class="timeLine-item"
                            v-for="(activity, index) in activities"
                            :key="index"
                            :timestamp="activity.location">
                            {{activity.publishTime}}
                            </el-timeline-item>
                        </el-timeline>
                      </div>
                      <el-button
                        size="mini"
                        type="danger" slot="reference" @click="handleSee(scope.$index, scope.row)">快递</el-button>
                    </el-popover>
                  </template>
              </el-table-column>
              <el-table-column align="right" label="查看">
                  <template slot-scope="scope">
                      <el-popover
                          placement="left"
                          width="500">
                          <div class="express-track">
                              <p class="title">订单详情</p>
                              <ul class="detail"> 
                                  <li>
                                          <span>订单状态：</span>
                                          <span>{{details.consumerStatus}}</span>
                                      </li>
                                      <li>
                                          <span>快递状态：</span>
                                          <span>{{details.currentStatusText}}</span>
                                      </li>
                                      <li>
                                          <span>快递员：</span>
                                          <span>{{details.kname}}</span>
                                      </li>
                                      <li>
                                          <span>快递员电话：</span>
                                          <span>{{details.ktelephone}}</span>
                                      </li>
                                      <li>
                                          <span>寄件人姓名：</span>
                                          <span>{{details.jname}}</span>
                                      </li>
                                      <li>
                                          <span>寄件人电话：</span>
                                          <span>{{details.jtelephone}}</span>
                                      </li>
                                      <li>
                                          <span>寄件地址：</span>
                                          <span>{{details.jprovince+details.jcity+details.jarea+details.jaddressDetail}}</span>
                                      </li>
                                      <li>
                                          <span>收件人姓名：</span>
                                          <span>{{details.sname}}</span>
                                      </li>
                                      <li>
                                          <span>收件人电话：</span>
                                          <span>{{details.stelephone}}</span>
                                      </li>
                                      <li>
                                          <span>收件地址：</span>
                                          <span>{{details.sprovince+details.scity+details.sarea+details.saddressDetail}}</span>
                                      </li>
                                        <li>
                                            <span>期望取件时间：</span>
                                            <span>{{details.lookingTime}}</span>
                                        </li>
                                        
                                        <li>
                                            <span>寄件方式：</span>
                                           <span>{{details.type==1?'快递员上门':'网点自寄'}}</span>
                                        </li>
                                        <li>
                                            <span>快递公司：</span>
                                            <span>{{details.companyName}}</span>
                                        </li>
                                        <li>
                                            <span>付费方式：</span>
                                            <span>{{details.paymentMethod}}</span>
                                        </li>
                                        <li>
                                            <span>物品信息：</span>
                                            <span>{{details.goodsType==1?'书籍':details.goodsType==2?'衣物':details.goodsType==3?'电子产品':details.goodsType==4?'食品':'其他'}}</span>
                                        </li>
                                        <li>
                                            <span>保价费用：</span>
                                            <span>{{details.insuranceMoney?details.insuranceMoney:0}}</span>
                                        </li>
                                        <li>
                                            <span>备注：</span>
                                            <span>{{details.remarks}}</span>
                                        </li>
                              </ul>
                          </div>
                          <el-button
                              size="mini"
                              type="danger" slot="reference" @click="handleXq(scope.$index, scope.row)">详情</el-button>
                      </el-popover>
                  </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </el-tabs>
  </div>
</template>

<script>
import Header from './header'
import qs from 'qs'
import global from '@/lib/global'
export default {
  name: 'ExpressInquiry',
  components:{
      'header-item': Header
  },
  data() {
    return {
      activeName: 'first', 
      activeIndex: "2",
      tableData: [],
      kEvaluation:null,
      nkEvaluation:null,
      consumerEvaluation:'',
      track: false,
      formInline: {
        number: '1',
        nameLike: ''
      },
      search: '',
      reverse: true,
      activities: [],
      details:'',
      // 分页参数
      currentPage:1,
      total:0,
      label:'待运输',
      pageSize:1,
      pageSizes:[1, 5, 10, 20],
      page: 1,
      limit: 1,
    };
  },
  created(){
    // 请求数据
    this.getData( global.baseUrl + '/orderInfo/expressQuery?type=待运输&page=1&limit=1')
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      // 请求数据
      this.getData( global.baseUrl + '/orderInfo/expressQuery?type='+this.label+'&page=1&limit='+val)
      this.limit = val
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // 请求数据
      this.getData( global.baseUrl + '/orderInfo/expressQuery?type='+this.label+'&limit=1&page='+val)
      this.page = val
    },
    handleClick(tab, event) {
      // 请求数据
      this.getData( global.baseUrl + '/orderInfo/expressQuery?page='+this.page+'&limit='+this.limit+'&type='+tab.label);
      this.label = tab.label
      this.pageSizes = [1, 5, 10, 20]
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 查看快递
    handleSee(index, row) {
      console.log(row.id);
      this.getData( global.baseUrl + '/orderInfo/transportAll?orderId='+row.id,1)
    },
    // 查看订单详情
    handleXq(index, row){
        this.getData1( global.baseUrl + '/orderInfo/detail?id='+row.id,'','',(resp)=>{
            if(resp.data.success){
                this.details =  resp.data.data;
            }else{        
                this.$message.error(resp.data.message);
            }
        })
    },
    // 提醒
    handleTixing(index, row) { // /messge/remindFaHuo
      this.$axios({
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
              'token':sessionStorage.getItem('token')
          },
          method: 'post',
          url: global.baseUrl + '/messge/remindFaHuo',
          data: qs.stringify({'orderId':row.id})
      }).then((resp)=>{ 
        if(resp.data.success){
          this.$message({
            message: '提醒成功',
            type: 'success'
          });
        }else{
          this.$message.error('提醒失败');
        } 
      })
      .catch((error)=>{
          this.$message.error('网络出错了');
      })
    },
    
    getData1(url,data,type,fn){
        this.$axios({
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                'token':sessionStorage.getItem('token')
            },
            method: type,
            url: url,
            data: qs.stringify(data)
        }).then((resp)=>{
            if(fn){
                fn(resp);
            }else{
                console.log(resp);
            }
        })
        .catch((error)=>{
            console.log(error);
            this.$message.error('网络出错了');
        })
    },
    getData(data,type){
      this.$axios({
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
              'token':sessionStorage.getItem('token')
          },
          method: 'get',
          url: data
      }).then((resp)=>{ 
        console.log(resp);    
        if(type == 1){  // 查看详情
          if(resp.data.success){
              this.track = true
              this.activities = resp.data.data 
          }else{
              this.$message.error(resp.data.message);
          }
        }else if(type == 2){
          if(resp.data.success){
            this.$message({
              message: '评价成功',
              type: 'success'
            });
            setTimeout(()=>{
                this.getData( global.baseUrl + '/orderInfo/expressQuery?type=已完成')
            },3000)
          }else{
              this.$message.error(resp.data.message);
          }
        }else{
          if(resp.data.success){
              this.tableData = resp.data.data.data;
              this.total = resp.data.data.count;
          }else{
              this.$message.error(resp.data.message);
          }
        }
      })
      .catch((error)=>{
          this.$message.error('网络出错了');
      })
    },
    onSubmit(data) {
      this.getData( global.baseUrl + '/orderInfo/orderLikeQuery?type='+data+'&number='+this.formInline.number+'&nameLike='+this.formInline.nameLike)
    },
    handlePingjia(index, row){
      this.getData( global.baseUrl + '/orderInfo/remarkAll?kEvaluation='+this.kEvaluation+'&nkEvaluation='+this.nkEvaluation+'&consumerEvaluation='+this.consumerEvaluation+'&orderId='+row.id,2)
    }
  }
}
</script>

<style scoped>
.el-table{
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}
.box-card{
  margin-bottom: 10px;
}
.timeLine-item{
  text-align: left !important;
}
.title{
  text-align: left;
  font-size: 18px;
}
.expres-detail ul{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
.expres-detail ul li{
  display: inline-block;
  margin: 0 10px;
  line-height: 35px;
  font-size: 16px;
}
.pingjia{
  margin: 10px 0;
}
.pingjia span{
  margin-right: 10px;
}
.detail li{
    line-height: 30px;
}
.detail li span:nth-child(1){
    display: inline-block;
    width: 100px;
}
</style>
